<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   

    <svg width="400" height="400" viewBox="-50 -50 100 100" style="border:solid #000;">
        <defs>
            <filter id="f1" x="-1" y="-1" width="2" height="2">
                <feFlood result="img1" flood-color="#f00"></feFlood>
                
            </filter>
        </defs>

        <rect x="0" y="0" width="20" height="20" fill="#fac" stroke="#00f" filter="url(#f1)"/>
    </svg>
    <svg class="svg-filters"  width="256" height="192" style="border:solid #ccc;" >
        <defs>
            <filter id="filter-ripple">
                <feImage xlink:href="https://www.zhangxinxu.com/study/201712/grad/map.png" x="0" y="0" width="256" height="256" result="ripple"></feImage>
                <feDisplacementMap xChannelSelector="G" yChannelSelector="G"  
                in="SourceGraphic" in2="ripple" scale="0"></feDisplacementMap>
                
            </filter>
        </defs>
        <image xlink:href="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" width="256" height="192" filter="url(#filter-ripple)"></image> 
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100" style="border:solid #000;">
        <defs>
            <linearGradient id="l1"
                x1="0" y1="0"
                x2="1" y2="0">
                <stop offset="0" stop-color="#f00"/>
                <stop offset="1" stop-color="#000"/>
            </linearGradient>
            <filter id="f3" x="0" y="0" width="1" height="1">
                <feImage href="../imgs/7.png" x="30" y="30" width="40" height="40" result="r1"/>
                <!-- <feFlood x="0" y="0" width="10" height="10" flood-color="#fac" flood-opacity="1" result="r1"/> -->
                <feDisplacementMap in="r1" in2="SourceGraphic"
                    xChannelSelector="R" yChannelSelector="G" scale="30"></feDisplacementMap>
            </filter>
        </defs>

        <rect x="10" y="10" width="80" height="80" fill="url(#l1)" />
        <rect x="10" y="10" width="80" height="80" fill="url(#l1)" filter="url(#f3)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100" style="border:solid #000;">
        <defs>
            <radialGradient id="l2" fr="30" gradientUnits="userSpaceOnUse" spreadMethod="reflect" >
                <stop offset="0" stop-color="#f00"/>
                <stop offset="1" stop-color="#000"/>
            </radialGradient>
            <filter id="f4" x="0" y="0" width="1" height="1">
                <feImage href="../imgs/7.png" x="10" y="10" width="80" height="80" result="r1"/>
                <!-- <feFlood x="0" y="0" width="10" height="10" flood-color="#fac" flood-opacity="1" result="r1"/> -->
                <feDisplacementMap in="r1" in2="SourceGraphic"
                    xChannelSelector="R" yChannelSelector="R" scale="0">
                    <animate id="a1" attributeType="XML"
                        attributeName="scale"
                        from="30"
                        to="0"
                        dur="2s"
                        begin="r1.click"
                        repeatCount="1"
                        fill="remove"/>
                    <!-- <animate attributeType="XML"
                        attributeName="scale"
                        from="30" to="0"
                        dur="2s"
                        begin="a1.end"
                        repeatCount="1"
                        fill="freeze"/> -->
                </feDisplacementMap>
            </filter>
        </defs>

        <rect x="10" y="10" width="80" height="80" fill="url(#l2)" />
        <rect id="r1" x="10" y="10" width="80" height="80" fill="url(#l2)" filter="url(#f4)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100" style="border:solid #000;">
        <defs>
           <filter id="f5">
                <feImage href="../imgs/8.png" x="0" y="0" width="100" height="100" preserveAspectRatio="xMinYMin slice" result="r1"/>
                <feDisplacementMap
                    in="r1" in2="SourceGraphic" xChannelSelector="A" yChannelSelector="A" scale="10"
                ></feDisplacementMap>
           </filter>
            
        </defs>

        <g filter="url(#f5)">
            <rect x="0" y="0" width="50" height="100" fill="#f00"/>
            <rect x="50" y="0" width="50" height="100" fill="#0f0" fill-opacity="0"/>
        </g>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs> 
            <radialGradient id="l3" fr="5" r="10" spreadMethod="reflect" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#000" stop-opacity="1"/>
                <stop offset="1" stop-color="#f00" stop-opacity="1"/>
            </radialGradient>
            <filter id="f6">
                <feImage result="pict2" width="100" height="100" x="0" y="0" preserveAspectRatio="xMidYMid slice"
                     xlink:href="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e478aa3ed2643a3b3c777fae07ce1bc~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?%29%E6%B5%8B%E8%AF%95%E8%AF%A5%E6%BB%A4%E9%95%9C%EF%BC%8C%E4%BB%A3%E7%A0%81%E5%A6%82%E4%B8%8B" ></feImage>
                <feDisplacementMap result="pict3" scale="0"
                    xChannelSelector="R"  yChannelSelector="R"
                    in="pict2" in2="SourceGraphic">
                    <animate attributeType="XML"
                        attributeName="scale"
                        from="8" to="0"
                        dur="1s"
                        begin="c1.click"
                        fill="freeze"
                        restart="whenNotActive"
                        repeatCount="1"/>
                </feDisplacementMap>

                <feComposite in="pict3" in2="SourceGraphic"
                    operator="in"/>
            </filter>
        </defs>
        <image  xlink:href="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e478aa3ed2643a3b3c777fae07ce1bc~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?%29%E6%B5%8B%E8%AF%95%E8%AF%A5%E6%BB%A4%E9%95%9C%EF%BC%8C%E4%BB%A3%E7%A0%81%E5%A6%82%E4%B8%8B" 
        x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMid slice"></image>
        <ellipse id="e1" cx="30" cy="20" rx="20" ry="15" fill="url(#l3)" filter="url(#f6)"  >
            <animate attributeType="XML" restart="whenNotActive"
                    attributeName="rx" from="20" to="60" dur="1s" begin="c1.click" fill="freeze" repeatCount="1"/>
            <animate  attributeType="XML" restart="whenNotActive"
                    attributeName="ry" from="10" to="45" dur="1s" begin="c1.click" fill="freeze" repeatCount="1"/>
        </ellipse>
        <rect id="c1" x="0" y="0" width="100" height="100" fill-opacity="0"/>
    </svg>  
    
    <svg style="position:relative;" width="400" height="400" viewBox="0 0 100 100">
        <image xlink:href="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e478aa3ed2643a3b3c777fae07ce1bc~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?%29%E6%B5%8B%E8%AF%95%E8%AF%A5%E6%BB%A4%E9%95%9C%EF%BC%8C%E4%BB%A3%E7%A0%81%E5%A6%82%E4%B8%8B" 
            x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMid slice"></image>
    </svg> 

    <script>
        const c1 = document.querySelector('#c1');
        const e1 = document.querySelector('#e1');
        const l3 = document.querySelector('#l3');
        
        c1.onclick = function(){
            c1.onmousemove = null ;
            c1.onclick = null ;
            setTimeout(() => {
                setEllipsePosition();
            }, 1000);
        }
        
        function setEllipsePosition(){
            c1.onmousemove = function(e){
               e1.setAttribute('cx',e.offsetX/4);
               e1.setAttribute('cy',e.offsetY/4);
               l3.setAttribute('cx',`${e.offsetX/4} `);
               l3.setAttribute('cy',`${e.offsetY/4} `);
            }
            c1.onclick = function(){
                c1.onmousemove = null ;
                c1.onclick = null ;
                setTimeout(() => {
                    setEllipsePosition();
                }, 1000);
        }
        }
        setEllipsePosition();
    </script>
    <!-- <script src="index.js"></script> -->
</body>
</html>